<template>
    <div class="commodity_details">
        <!--系列-->
        <div class="goodsClassi text-center" v-if="goods.imgs"
             :style="'background-image: url('+(goods.imgs[1]?setUrl(goods.imgs[1].url,'0x480'):setUrl(goods.imgs[0].url,'0x480'))+')'">
            <div class="col-xs-4 col-xs-offset-2">
                <div class="instrument">
                    <div class="yellowFont">{{goods.brief}}</div>
                    <h3>{{goods.name}}</h3>
                    <div class="goodsPrice">￥<span>{{price}}</span></div>
                </div>
            </div>
            <div class="col-xs-4">
                <div class="buyNow">
                    <span class="glyphicon glyphicon-star" @click="Collection(goods.id)" :class="isCollect?'is_collect':'no_collect'"></span>
                    <!--加入购物车-->
                    <!--<span class="glyphicon glyphicon-shopping-cart"></span>-->
                    <button  @click="purchase(goods)">点击购买</button>
                </div>
            </div>
        </div>
        <!-- -->
        <div class="goodsPurchased text-center" v-if="isBuyBtn">
            <div class="goodsOperating">
                <div class="col-xs-6  col-lg-6">
                    <div class="goodsProfile col-xs-5"><span class="glyphicon glyphicon-play"></span>{{goods.brief}}</div>
                    <div class="goodsName col-xs-4">{{goods.name}}</div>
                    <div class="goodsPrice col-xs-2">￥<span>{{price}}</span></div>
                </div>
                <div class="goodsChoice col-xs-6 col-lg-6">
                    <div class="goodsComments col-xs-3" @click="toLookComment">查看评论</div>
                    <div class=" col-xs-2" @click="Collection(goods.id)"><span class="goodsCollect glyphicon glyphicon-star"></span>收藏</div>
                    <!--加入购物车-->
                    <!--<div class=" col-xs-3"><span class="goodsAdd glyphicon glyphicon-shopping-cart"></span>添加购物车</div>-->
                    <div class="col-xs-2">
                        <button class="btn goodsBuy" @click="purchase(goods)">购买</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="goodsAttrs" v-if="goods">
            <div class="mid">
                规格：
                <span v-for="item in goods.goodsAttrs" :class="goodsAttrs_id==item.id?'checkAttr':''" @click="optAttr(item)" :value="item.id">{{item.name}}</span>
            </div>
        </div>
        <!--商品图形介绍-->
        <div class="graphicalIntroduction">
            <div class="goodsFigure" v-html="goods.desc">
                {{goods.desc}}
            </div>
        </div>
        <!--购买反馈-->
        <div class="buyFeedback">
            <div class="feedback">
                <div class="verticalLine"></div>
                <div>
                    <h3>购物反馈</h3>
                    <h3>Comments</h3>
                </div>
            </div>
            <div class="noComment" v-if="comments.length==0">暂无评论</div>
            <ul class="comments-ul" v-else-if="comments">
                <li v-for="comment in comments">
                    <a class="media-left" href="javascript:">
                        <img class="img-circle" :src="comment.user.portrait.url" alt="">
                    </a>
                    <div class="media-body">
                        <h4>{{comment.user.nickname}}&nbsp;&nbsp;|&nbsp;&nbsp; {{comment.create_at}}</h4>
                        <div class="commentStars" v-for="item in comment.commentedTpl">
                            <h4>{{item.commentTplItem.name}}&nbsp;
                                <i class="glyphicon glyphicon-star" :class="i<=item.star ? 'icon-gold':'icon-gray'" v-for="i in 5"></i></h4>
                        </div>
                        <div class="commentContent">{{comment.content}}</div>
                        <div class="commentImg">
                            <span v-for="img in comment.imgs"><img :src="img.url" alt=""></span>
                        </div>
                        <div class="merchantReply" v-if="comment.supplier_reply">
                            <a class="media-left" href="javascript:">
                                <img class="img-circle" src="../images/2-06.jpg" alt="">
                            </a>
                            <div class="media-body">
                                <h4>{{supplier.name}}&nbsp;&nbsp;|&nbsp;&nbsp; 时间</h4>
                                <div class="commentContent">{{comment.supplier_reply}}</div>
                            </div>
                        </div>
                    </div>
                    <hr>
                </li>
            </ul>

        </div>
    </div>
</template>

<script>
    require('./commodity-details.css');
    var urlParm=require('./lib/urlParm');
    module.exports={
        data:function () {
            return{
                goods:{},
                comments:[],
                orderId:'',
                supplier:'',
                isBuyBtn:false,//是否显示浮动导航栏
                isCollect:false,//商品是否被收藏
                goodsAttrs_id:'',
                price:'',
            }
        },
        watch:{
//            goodsAttrs_id:function () {
//                alert(this.goodsAttrs_id)
//            }
        },
        methods:{
            purchase:function (data) {
                var self=this;
                if(data.goodsAttrs.length>0&&!this.goodsAttrs_id){
                    $('.goodsAttrs').slideDown(100);
                    return
                }
                JxSdk.orderPre.createByGoods(data.id,this.goodsAttrs_id,1).then(function (data) {
//                    console.log(data.orderPres[0].id);
                    self.orderId=data.orderPres[0].id;
                    self.$router.push({path:'/confirm?id='+self.orderId});
                });
            },
            optAttr:function (data) {
                this.goodsAttrs_id = data.id;
                this.price=data.price
            },
            setUrl:JxSdk.img.getUrl,
            Collection:function (id) {
                var _self=this;
                if(!this.isCollect){
                    JxSdk.user.collect(id).then(function () {
                        _self.isCollect=!_self.isCollect;
                    });
                }else{
                    JxSdk.user.collect(id,1).then(function () {
                        _self.isCollect=!_self.isCollect;
                    });
                }
            },
            toLookComment:function () {
                var height=$('.buyFeedback').offset().top;
                $('body,html').animate({scrollTop:height-150});
            }
        },
        created:function () {
            var self=this;
            var url=urlParm.default();
            JxSdk.comment.goodsCommentsGet(url.id).then(function (data) {
                self.comments=data.list;
                if(data.list.length>0){
                    JxSdk.supplier.getInfo().then(function (data) {
                        self.supplier=data.supplier;
                    });
                }
            });
            JxSdk.goods.get(url.id).then(function (data) {
                self.goods=data.goods;
                self.price=data.goods.price;
            });
            JxSdk.user.isCollect(url.id).then(function (data) {
                self.isCollect=data.is_collect;
            })
        },
        mounted:function () {
            var self=this;
            $(window).scroll(function () {
                var h=$(window).scrollTop();
                    self.isBuyBtn=h>300;
            })
        }
    }
</script>